@extends('layouts.app')
@section('page-bar')
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li>
                <a href="/">Home</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a href="#">系统管理</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a href="{{ route('user.index') }}">用户管理</a>
            </li>
        </ul>
    </div>
@stop
@section('page-title')
    <h3 class="page-title"> 用户管理
        <small>编辑用户信息</small>
    </h3>
@stop
@section('page-body')
    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN PROFILE SIDEBAR -->
            <div class="profile-sidebar">
                <!-- PORTLET MAIN -->
                <div class="portlet light profile-sidebar-portlet ">
                    <!-- SIDEBAR USERPIC -->
                    <div class="profile-userpic">
                        <img src="{{ Auth::user()->avatar }}" class="img-responsive" alt=""> </div>
                    <!-- END SIDEBAR USERPIC -->
                    <!-- SIDEBAR USER TITLE -->
                    <div class="profile-usertitle">
                        <div class="profile-usertitle-name"> {{ Auth::user()->realname }} </div>
                    </div>
                    <!-- END SIDEBAR USER TITLE -->
                    <!-- SIDEBAR BUTTONS -->
                    <div class="profile-userbuttons">
                        <a href="{{ route('user.profile') }}" type="button" class="btn btn-circle green btn-sm">Follow</a>
                        <button type="button" class="btn btn-circle red btn-sm">Message</button>
                    </div>
                    <!-- END SIDEBAR BUTTONS -->
                    <!-- SIDEBAR MENU -->
                    <div class="profile-usermenu">
                        <ul class="nav">
                            <li>
                                <a href="{{ url('/') }}">
                                    <i class="icon-home"></i> Overview </a>
                            </li>
                            <li class="active">
                                <a href="{{ route('user.edit', ['id' => 1]) }}">
                                    <i class="icon-settings"></i> Account Settings </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="profile-content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light ">
                            <div class="portlet-title tabbable-line">
                                <div class="caption caption-md">
                                    <i class="icon-globe theme-font hide"></i>
                                    <span class="caption-subject font-blue-madison bold uppercase">Profile Account</span>
                                </div>
                                <ul class="nav nav-tabs">
                                    <li class="active">
                                        <a href="#info" data-toggle="tab">用户信息</a>
                                    </li>
                                    <li>
                                        <a href="#avatar" data-toggle="tab">头像修改</a>
                                    </li>
                                    <li>
                                        <a href="#changepass" data-toggle="tab">密码修改</a>
                                    </li>

                                </ul>
                            </div>
                            <div class="portlet-body">
                                <div class="tab-content">
                                    <!-- PERSONAL INFO TAB -->
                                    <div class="tab-pane active" id="info">
                                        <form role="form" action="{{ route('user.update', ['id' => 1]) }}" method="POST">
                                            {{ method_field('PUT') }}
                                            {{ csrf_field() }}
                                            <div class="form-group form-md-line-input form-md-floating-label {{ $errors->has('username') ? 'has-error' : 'has-info' }}">
                                                <div class="input-group right-addon">
                                                    <input type="text" class="form-control" id="username" name="username" value="{{ $username }}" />
                                                    <label for="username">用户名(用以登陆系统)</label>
                                                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                </div>
                                            </div>
                                            <div class="form-group form-md-line-input form-md-floating-label {{ $errors->has('realname') ? 'has-error' : 'has-info' }}">
                                                <div class="input-group right-addon">
                                                    <input type="text" class="form-control" id="realname" name="realname" value="{{ $realname }}" />
                                                    <label for="realname">真实姓名(用以识别身份)</label>
                                                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                </div>
                                            </div>
                                            <div class="form-group form-md-line-input form-md-floating-label {{ $errors->has('phone') ? 'has-error' : 'has-info' }}">
                                                <div class="input-group right-addon">
                                                    <input type="text" class="form-control" id="phone" name="phone" value="{{ $phone }}" />
                                                    <label for="phone">联系电话(方便他人联系)</label>
                                                    <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                                                </div>
                                            </div>

                                            <div class="form-group form-md-line-input form-md-floating-label has-info">
                                                <select class="form-control" id="role" name="role">
                                                    @foreach($roles as $role)
                                                        <option value="{{ $role->id }}">{{ $role->display_name }}</option>
                                                    @endforeach
                                                </select>
                                                <label for="role">用户角色</label>
                                            </div>
                                            <div class="form-group form-md-radios">
                                                <label>性别</label>
                                                <div class="md-radio-inline">
                                                    <div class="md-radio {{ $errors->has('sex') ? 'has-error' : 'has-info' }}">
                                                        <input type="radio" checked="" class="md-radiobtn" name="sex" id="sex1" value="男">
                                                        <label for="sex1">
                                                            <span class="inc"></span>
                                                            <span class="check"></span>
                                                            <span class="box"></span> 男
                                                        </label>
                                                    </div>
                                                    <div class="md-radio {{ $errors->has('sex') ? 'has-error' : 'has-info' }}">
                                                        <input type="radio" class="md-radiobtn" name="sex" id="sex2" value="女">
                                                        <label for="sex2">
                                                            <span class="inc"></span>
                                                            <span class="check"></span>
                                                            <span class="box"></span> 女
                                                        </label>
                                                    </div>
                                                    <div class="md-radio {{ $errors->has('sex') ? 'has-error' : 'has-info' }}">
                                                        <input type="radio" class="md-radiobtn" name="sex" id="sex3" value="保密">
                                                        <label for="sex3">
                                                            <span class="inc"></span>
                                                            <span class="check"></span>
                                                            <span class="box"></span> 保密
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group form-md-radios">
                                                <label>帐号状态</label>
                                                <div class="md-radio-inline">
                                                    <div class="md-radio {{ $errors->has('status') ? 'has-error' : 'has-info' }}">
                                                        <input type="radio" {{ $status ? 'checked' : '' }} class="md-radiobtn" name="status" id="status1" value="1">
                                                        <label for="status1">
                                                            <span class="inc"></span>
                                                            <span class="check"></span>
                                                            <span class="box"></span> 启用
                                                        </label>
                                                    </div>
                                                    <div class="md-radio has-error">
                                                        <input type="radio" {{ $status ? '' : 'checked' }} class="md-radiobtn" name="status" id="status2" value="0">
                                                        <label for="status2">
                                                            <span class="inc"></span>
                                                            <span class="check"></span>
                                                            <span class="box"></span> 禁用
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="margiv-top-10">
                                                <button data-loading-text="Loading..." class="btn blue mt-ladda-btn ladda-button submit-btn margin-right-10" data-style="slide-right">
                                                    <span class="ladda-label">Submit</span>
                                                    <span class="ladda-spinner"></span>
                                                    <span class="ladda-spinner"></span>
                                                    <div class="ladda-progress" style="width: 100px;"></div>
                                                </button>
                                                <button class="btn default" type="button" onclick="javascript:history.back()">Cancel</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="tab-pane" id="avatar">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="margin-bottom-15">
                                                    <form action="{{ url('user/avatar') }}" id="avatar-from" method="POST" enctype="multipart/form-data">
                                                        {{ csrf_field() }}
                                                        <div class="change-avatar pull-left">
                                                        <span class="btn green btn-file margin-right-10">
                                                            <span class="fileinput-new" id="upload-avatar"> 选择图片 </span>
                                                            <input type="file" id="image" name="avatar">
                                                        </span>
                                                        </div>
                                                    </form>
                                                    <form action="{{ url('avatar/api') }}" method="POST">
                                                        {{ csrf_field() }}
                                                        <input type="hidden" id="photo" name="photo" value="{{ Auth::user()->avatar }}">
                                                        <input type="hidden" id="x" name="x">
                                                        <input type="hidden" id="y" name="y">
                                                        <input type="hidden" id="w" name="w">
                                                        <input type="hidden" id="h" name="h">
                                                        <button class="btn blue" type="submit"> 保存头像 </button>
                                                    </form>
                                                </div>
                                                <img style="width: 500px;" id="cropbox" class="user-avatar" src="{{ Auth::user()->avatar }}">
                                            </div>
                                            <div class="col-md-6">
                                                <div id="preview-pane">
                                                    <div class="preview-container">
                                                        <img src="{{ Auth::user()->avatar }}" class="jcrop-preview" alt="Preview" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="changepass">
                                        <form action="#">
                                            <div class="form-group form-md-line-input form-md-floating-label {{ $errors->has('password') ? 'has-error' : 'has-info' }}">
                                                <div class="input-group right-addon">
                                                    <input type="password" class="form-control" id="password" name="password">
                                                    <label for="password">原密码</label>
                                                    <span class="input-group-addon"><i class="fa fa-key"></i></span>
                                                </div>
                                            </div>
                                            <div class="form-group form-md-line-input form-md-floating-label {{ $errors->has('password') ? 'has-error' : 'has-info' }}">
                                                <div class="input-group right-addon">
                                                    <input type="password" class="form-control" id="password" name="password">
                                                    <label for="password">新密码</label>
                                                    <span class="input-group-addon"><i class="fa fa-key"></i></span>
                                                </div>
                                            </div>
                                            <div class="form-group form-md-line-input form-md-floating-label {{ $errors->has('password_confirmation') ? 'has-error' : 'has-info' }}">
                                                <div class="input-group right-addon">
                                                    <input type="password" class="form-control" id="password_confirmation" name="password_confirmation">
                                                    <label for="password_confirmation">确认密码</label>
                                                    <span class="input-group-addon"><i class="fa fa-key"></i></span>
                                                </div>
                                            </div>
                                            <div class="margin-top-10">
                                                <a href="javascript:;" class="btn green"> Change Password </a>
                                                <a href="javascript:;" class="btn default"> Cancel </a>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END PROFILE CONTENT -->
        </div>
    </div>
@stop
@section('module_js')
    <script type="text/javascript">
        $(document).ready(function() {
            //ajax form submit
            var options = {
                success: callback,
                dataType: 'json'
            };
            $('#image').on('change', function(){
                $('#upload-avatar').html('正在上传...');
                $('#avatar-from').ajaxForm(options).submit();
            });
            function callback(response) {
                if (response.status == 'success') {
                    $('.user-avatar').attr('src', response.avatar);
                    $('.jcrop-preview').attr('src', response.avatar);
                    $('#photo').val(response.image);
                    $('#upload-avatar').html('重新选择');
                } else {
                    toastr.warning(response.message);
                }
            }
            //jcrop options
            var jcrop_api, boundx, boundy,
                    $preview = $('#preview-pane'),
                    $pcnt = $('#preview-pane .preview-container'),
                    $pimg = $('#preview-pane .preview-container img'),
                    xsize = $pcnt.width(),
                    ysize = $pcnt.height();
            //jcrop
            $('#cropbox').Jcrop({
                onChange: updatePreview,
                onSelect: updatePreview,
                aspectRatio: xsize / ysize,
                boxWidth: 500
            },function(){
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                jcrop_api = this;
                $preview.appendTo(jcrop_api.ui.holder);
            });
            //update preview and set x y w h
            function updatePreview(c)
            {
                if (parseInt(c.w) > 0)
                {
                    var rx = xsize / c.w;
                    var ry = ysize / c.h;
                    $pimg.css({
                        width: Math.round(rx * boundx) + 'px',
                        height: Math.round(ry * boundy) + 'px',
                        marginLeft: '-' + Math.round(rx * c.x) + 'px',
                        marginTop: '-' + Math.round(ry * c.y) + 'px'
                    });
                    $('#x').val(c.x);
                    $('#y').val(c.y);
                    $('#w').val(c.w);
                    $('#h').val(c.h);
                }
            }
        });

    </script>
@stop